<template>
    <div>

        <!-- 轮播图 -->
        <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>

        <!-- 九宫格区域 改造 六宫格-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/newslist">
                    <img src="../../images/menu1.png" alt="">
                    <div class="mui-media-body">新闻</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/photolist">
                    <img src="../../images/menu2.png" alt="">
                    <div class="mui-media-body">图片分享</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/goodslist">
                    <img src="../../images/menu3.png" alt="">
                    <div class="mui-media-body">嗨猫自营</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <img src="../../images/menu4.png" alt="">
                    <div class="mui-media-body">生活服务</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <img src="../../images/menu5.png" alt="">
                    <div class="mui-media-body">品质优选</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <img src="../../images/menu6.png" alt="">
                    <div class="mui-media-body">嗨猫分期</div>
                </a>
            </li>
        </ul>

    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    import swiper from '../subcomponents/Swiper.vue'
    export default {
        data() {
            return {
                lunbotuList: []
            }
        },

        created () {
            this.getlunbotu();
        },

        methods: {
            getlunbotu(){
                this.$http.get('api/getlunbo').then(res=>{
                    // console.log(res);
                    if (res.body.status === 0) {
                        this.lunbotuList = res.body.message;
                    } else {
                        Toast('轮播图加载失败...');
                    }
                })
            }
        },

        components: {
            swiper
        }
    }
</script>

<style lang="less" scoped>   
    .mui-grid-view.mui-grid-9 {
        background-color: #fff;
        border: none;
        li {
            border: none;
            img {
                width: 60%;
                height: auto;
            }
        }
    }
</style>


